<div class="panel_container">
  <mat-icon
    [ix-auto]=""
    ix-auto-type="options"
    ix-auto-identifier="{{row[key_prop]}}"
    id="{{row[entity?.conf?.rowIdentifier || 'name']}}_{{action}}_button"
    [matMenuTriggerFor]="appMenu"
    [style.cursor]="'pointer'"
  >
    {{icon_name}}
  </mat-icon>
  <mat-menu #appMenu="matMenu">
    <span *ngIf="!groups;else groupMenu">
      <span *ngFor="let action of actions"
        [matTooltip]="action.matTooltip" 
        [matTooltipDisabled]="!action.disabled"
        [matTooltipPosition]="action.ttposition ? action.ttposition : 'left'">
        <button 
          id="action_button_{{ action?.name }}__{{action.id}}" 
          mat-menu-item *ngIf="!entity.conf.isActionVisible || 
            entity.conf.isActionVisible.bind(entity.conf)(action.id, row)"
          (click)="action.onClick(this.row);"
          [disabled]="action.disabled"
          [ix-auto]=""
          ix-auto-type="action"
          ix-auto-identifier="{{action.id}}_{{action.label}}"
          >
				  <span>{{ action?.label | translate }}</span>
        </button>
      </span>
    </span>
    <ng-template #groupMenu>
      <span *ngFor= "let group of actions">
        <div class="group-menu-header" *ngIf="group.actions && group.actions.length > 0">
          <mat-divider></mat-divider>
          <div class="title"><strong>{{group?.title | translate}}</strong></div>
        </div>
        <span *ngFor="let action of group.actions"
          [matTooltip]="action.matTooltip" 
          [matTooltipDisabled]="!action.disabled"
          [matTooltipPosition]="action.ttposition ? action.ttposition : 'left'">
          <button 
            id="action_button_{{ action?.name }}__{{action.id}}" 
            mat-menu-item *ngIf="!entity.conf.isActionVisible || 
              entity.conf.isActionVisible.bind(entity.conf)(action.id, row)"
            (click)="action.onClick(this.row);"
            [disabled]="action.disabled"
            [ix-auto]=""
            ix-auto-type="action"
            ix-auto-identifier="{{action.id}}_{{action.label}}"
            >
				    <span>{{ action?.label | translate }}</span>
          </button>
        </span>
      </span>
    </ng-template>
  </mat-menu>
</div>
